<template>
	<view class="content">
		<image class="logo" src="/static/wallet.png"></image>
		<view class="my_input_box">
			<input class="my_input" type="text" placeholder="请输入金额" v-model="total">
		</view>
		<button class="my_button" @click="payHanle">支付</button>
	</view>
	<view class="info_box">
		支付状态: <text style="font-weight: 800;">{{ payStatus }} </text>
	</view>
</template>

<script setup>
	import { ref,reactive } from "vue";
	
	// 支付状态
	let payStatus = ref("未支付");
	// 支付金额
	let total = ref(0.01);
	
	// 支付处理器
	function payHanle(){
		// 调用后端接口，向微信服务器创建预支付订单
		createPrePayOrder();
	}
	
	// 创建预支付订单
	function createPrePayOrder(){
		// 处理金额，前端单位为元，后端单位为分
		let total_R = total.value * 100
		uni.request({
			url:`https://localhost/pay/preOrderCreate?total=${total_R}`,
			success(res) {
				// 获取后端返回的支付参数，调用自定义支付唤起函数
				payActive(res.data.data);
			}
		})
	}
	
	// 唤起支付
	function payActive(payParam){
		console.log("唤起支付");
		
		uni.requestPayment({
		    "nonceStr": payParam.wxNonceStr, // 随机字符串
		    "package": payParam.wxPackage,        // 预支付订单号
		    "signType":payParam.wxSignType,     // 签名类型
		    "timeStamp": payParam.wxTimeStamp,  // 时间戳
		    "paySign": payParam.wxPaySign, // 签名，这里用的 RSA 签名
		    success(res) {
				// 支付成功处理逻辑
				console.log("支付成功!");
				payStatus.value = "支付成功";
			},
		    fail(e) {
				// 失败回调
				console.log("支付失败");
				console.log(e);
			}
		})
	}
	

</script>

<style>
	.my_input_box{
		display: flex;
		flex-direction: row;
		/* border: solid red 2px; */
	}
	
	.my_button{
		background-color: #ff2658;
		height: 41px;
		width: 99px;
		margin-top: 14px;
		color: white;
	}
	
	.my_input{
		border: solid #d22f7a 1px;
		padding-left: 4px;
		border-radius: 5px;
		height: 26px;
		line-height: 24px;

	}
	
	.info_box{
		border: solid #2646ff 1px;
		margin-top: 30px;
		text-align: center;
		font-size: 14px;
		height: 25px;
		line-height: 25px;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>
